<template>
  <el-dialog :visible='editShow' title="编辑" @close='btnCancel'>
   <el-form :model="formData" :rules="rules" ref="formData">
     <el-form-item label="房间号码" prop="roomNum">
        <el-input v-model="formData.roomNum" style="width:80%" />
     </el-form-item>
     <el-form-item label="客户姓名" prop="touristName">
           <el-input v-model="formData.touristName" style="width:80%" />
     </el-form-item>
     <el-form-item label="入住时间" prop="registerTime">
        <el-date-picker
            v-model="formData.registerTime"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions">
        </el-date-picker>
     </el-form-item>
     <el-form-item label="结账时间" prop="checkoutTime">
        <el-date-picker
            v-model="formData.checkoutTime"
            align="right"
            type="date"
            placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
     </el-form-item>
     <el-form-item label="付款方式" prop="paymentMethod">
           <el-input v-model="formData.paymentMethod" style="width:80%" />
     </el-form-item>
     <el-form-item label="付款金额" prop="totalCost">
           <el-input v-model="formData.totalCost" style="width:80%" />
     </el-form-item>
   </el-form>
     <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import {getIncomePay,updateIncomePayById} from '@/api/incomePay'
export default {
  data () {
    return {
      formData:{},
      rules: {
        roomNum:[{ required: true, message: '请输入房间号码', trigger: 'blur' }],
        touristName:[{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
        registerTime:[{ required: true, message: '请选择入住时间', trigger: 'blur' }],
        checkoutTime:[{ required: true, message: '请选择结账时间', trigger: 'blur' }],
        paymentMethod:[{required: true, message: '请输入结账方式', trigger: 'blur'}],
        totalCost:[{required: true, message: '请输入结账金额', trigger: 'blur'}]
      },
      // 日期选择器
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
      },
    }
  },
  props:{
    editShow:{
     type: Boolean,
    default: false
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
     btnCancel(){
      this.$parent.editShow=false
    },
      async btnOk(){
        try {
        await this.$refs.formData.validate() // 进行表单的验证
        await updateIncomePayById(this.formData)
        this.$parent.editShow=false
         this.$parent.getIncomePayList()
        this.$message.success('操作成功！')
        
      } catch (err) {
        console.log(err)
      }
    },
    async getIncomePayList(id){
    const data = await getIncomePay(id)
    this.formData=data
    }
    },
  }

</script>

<style>

</style>
